<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { useK8SApi } from "@/views/domain/kubeHud/api/k8s/k8s";
import { ConfigMap, Pod } from "@/views/domain/kubeHud/api/k8s/types";
import ResourceDetailsContainer from "../components/ResourceDetailsContainer.vue";
import KDescGroup from "../components/KDescGroup.vue";
import KDescRow from "../components/KDescRow.vue";
import InTagLine from "../components/InTagLine.vue";
import MetadataDescription from "../components/MetadataDescription.vue";
import KPodList from "../pod/widgets/KPodList.vue";
import PodContainerStatusCardFlow from "../pod/widgets/PodContainerStatusCardFlow.vue";

const { configMapRepo } = useK8SApi();

type Prop = {
  name?: string;
  namespace?: string;
};

const route = useRoute();

const props = defineProps<Prop>();

const currentDS = ref<ConfigMap>();
const dsPods = ref<Pod[]>();

const loading = ref(false);
const query = reactive<{
  name?: string;
  namespace?: string;
}>({});

const reload = async () => {
  loading.value = true;

  const { ok, data } = await configMapRepo.getConfigMapDetail({
    namespace: query.namespace,
    name: query.name
  });

  if (ok) {
    currentDS.value = data;
  }

  loading.value = false;
};

onMounted(() => {
  query.name = (route.query?.name as any) ?? props.name;
  query.namespace = (route.query?.namespace as any) ?? props.namespace;
  reload();
});
</script>

<template>
  <ResourceDetailsContainer
    v-if="currentDS"
    :title="'ConfigMap: ' + currentDS?.metadata?.name"
  >
    <MetadataDescription :metadata="currentDS.metadata" />

    <KDescGroup title="Data">
      <KDescRow
        v-for="(item, key) in currentDS?.data"
        :key="key"
        :label="`${key}`"
        :content="item"
      />
    </KDescGroup>
  </ResourceDetailsContainer>
  <div v-else v-loading="true" />
</template>
<style lang="scss" scoped></style>
